<template>
  <Dialog v-model="dialogVisible" :appendToBody="true" title="产品列表" width="70%">
    <ContentWrap>
      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
        <el-table-column key="id" align="center" label="编号" prop="id" min-width="80" />
        <el-table-column label="产品信息" min-width="300">
          <template #default="{ row }">
            <div class="flex">
              <el-image
                fit="cover"
                :src="row.picUrl"
                class="flex-none w-50px h-50px"
                @click="createImageViewer({ urlList: [row.picUrl] })"
              />
              <div class="ml-4 overflow-hidden">
                <el-tooltip effect="dark" :content="row.name" placement="top">
                  <div>
                    {{ row.name }}
                  </div>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="价格" min-width="160" prop="price">
          <template #default="{ row }"> ¥ {{ fenToYuan(row.price) }}</template>
        </el-table-column>
        <el-table-column align="center" label="库存" min-width="90" prop="stock" />
      </el-table>
    </ContentWrap>
    <template #footer>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { Spu } from '@/api/mall/product/spu'
import { VLogProductApi } from '@/api/vlog/product'
import { createImageViewer } from '@/components/ImageViewer'
import { fenToYuan } from '@/utils'

defineOptions({ name: 'VLogProductList' })

// 列表的数据
const list = ref<Spu[]>([])
// 列表的加载中
const loading = ref(false)
// 弹窗的是否展示
const dialogVisible = ref(false)

/** 打开弹窗 */
const open = (vlogId: number) => {
  dialogVisible.value = true
  getList(vlogId)
}
// 提供 open 方法，用于打开弹窗
defineExpose({ open })

/** 查询列表 */
const getList = async (vlogId: number) => {
  loading.value = true
  try {
    const data = await VLogProductApi.getVLogProductList({
      vlogId: vlogId,
      limit: 100
    })
    list.value = data
  } finally {
    loading.value = false
  }
}
</script>
